<template>
  <div class="indexPage">

    <div class="txt_box">
      <div class="txt_tle">
        用智能算法打造专属姓名
      </div>
      <div class="txt_tle hui">
        结合周易算法
      </div>
    </div>
    <div class="btn_box">
      <span class="play_btn" @click="bzNaming_void()">点击免费起名</span>
    </div>
    <div class="txt_box">
      <div class="txt_tle">
        生辰八字五行测算
      </div>
      <div class="txt_tle hui">
        结合周易算法
      </div>
      <div class="bagua_box">
        <img src="../../static/icon/bgpan.png" class="bagua_pan" alt="">
        <img src="../../static/icon/taji.png" class="taiji" alt="" id="xuanzhun">
      </div>
      <div class="btn_box">
        <span class="play_btn" @click="bz_test()">免费测算五行八字</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    bzNaming_void() {
      this.$router.push("/bz_namimg")
    },
    bz_test() {
      this.$router.push("/bz_test")
    }
  }
}
</script>
<style scoped>
#xuanzhun {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 3s linear infinite;
  -moz-animation: rotate 3s linear infinite;
  -o-animation: rotate 3s linear infinite;
  animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.bagua_box {
  position: relative;
  width: 60%;
  margin: 20px auto;
}
.bagua_box .bagua_pan {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: auto;
}

.bagua_box .taiji {
  position: absolute;
  width: 20%;
  top: 50%;
  left: 50%;
  margin-left: -10%;
  margin-top: -10%;
}
@media screen and (min-width: 600px) {
  .bagua_box .taiji {
    width: 88px;
    top: 50%;
    left: 50%;
    margin-left: -44px;
    margin-top: -44px;
  }
}
.play_btn {
  display: block;
  height: 45px;
  width: 160px;
  margin: 0 auto;
  line-height: 45px;
  color: #fff;
  background: #fbb03b;
  border: 2px solid #fbb03b;
  box-shadow: 5px 5px 5px #ccc;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
}
.play_btn:active {
  background-color: #e7930f;
}
.txt_box {
  margin-top: 50px;
  text-align: center;
}
.txt_box .txt_tle {
  font-size: 118%;
  color: #666;
  margin: 10px 0;
}
.hui {
  color: #bfbfbf !important;
  font-size: 90% !important;
}
</style>


